interface Iform {
  title: string;
  remark: string;
}

export default defineComponent({
  emits: ['update:visible', 'groupAddEmit'],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const modalVisible = computed({
      get() {
        return props.visible;
      },
      set(visible: boolean) {
        emit('update:visible', visible);
      }
    });

    const formData = ref<Iform>({
      title: '',
      remark: ''
    });

    const handleOk = () => {
      emit('groupAddEmit', formData.value);
      modalVisible.value = false;
      formData.value.title = '';
      formData.value.remark = '';
    };

    const handleCancel = () => {
      modalVisible.value = false;
      formData.value.title = '';
      formData.value.remark = '';
    };

    return () => (
      <a-modal
        width="50%"
        v-model:visible={modalVisible.value}
        onOk={handleOk}
        onCancel={handleCancel}
        maskClosable="false"
        draggable
        titleAlign="start"
        v-slots={{
          title: '新增分组'
        }}
      >
        <a-form model={formData.value}>
          <a-form-item field="" label="分组名称">
            <a-input
              max-length={15}
              show-word-limit
              v-model={formData.value.title}
            ></a-input>
          </a-form-item>
          <a-form-item field="" label="分组描述">
            <a-textarea
              v-model={formData.value.remark}
              max-length={30}
              show-word-limit
              auto-size={{
                minRows: 2
              }}
            ></a-textarea>
          </a-form-item>
        </a-form>
      </a-modal>
    );
  }
});
